<template>
  <div class="left-panel">
    <TitleComponent title="应聘申请表面试" />
    <!-- 附件简历 -->

    <!-- 基本信息 -->
    <div class="section" style="margin-top: 20px">
      <div class="attachment-section">
        <div class="avatar-container">
          <ImageComponent
            :src="applicationForm.personPhoto"
            width="100px"
            height="100px"
            borderRadius="6px"
          />
        </div>
        <div class="attachment-info">
          <div class="attachment-label">附件简历：</div>
          <div class="attachment-file">
            <div class="file-attachment" v-if="applicationForm.resumeFile">
              <div class="file-item">
                <el-icon><Document /></el-icon>
                <span
                  class="file-name"
                  @click="seeFileView(applicationForm.resumeFile)"
                  >{{ getFileName(applicationForm.resumeFile) }}</span
                >
              </div>
            </div>
            <span v-else style="font-size: 12px">暂无附件</span>
          </div>
        </div>
      </div>
      <div class="section-title">
        <span>基本信息</span>
      </div>
      <div class="view-container">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="form-item">
              <div class="label">姓名：</div>
              <div class="value">{{ applicationForm.name }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">
              <div class="label">性别：</div>
              <div class="value">
                {{ applicationForm.sex == 0 ? "男" : "女" }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="form-item">
              <div class="label">联系电话：</div>
              <div class="value">{{ applicationForm.phoneNumber }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">
              <div class="label">邮箱：</div>
              <div class="value">{{ applicationForm.mail }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="form-item">
              <div class="label">身份证号：</div>
              <div class="value">{{ applicationForm.idNumber }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">
              <div class="label">出生日期：</div>
              <div class="value">{{ applicationForm.birthTime }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="form-item">
              <div class="label">年龄：</div>
              <div class="value">{{ applicationForm.age }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">
              <div class="label">毕业院校：</div>
              <div class="value">{{ applicationForm.graduateSchool }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="form-item">
              <div class="label">专业名称：</div>
              <div class="value">{{ applicationForm.profession }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import TitleComponent from "@/components/TitleComponent.vue";
import ImageComponent from "@/components/ImageComponent.vue";
import { defineEmits } from "vue";
import { ArrowLeft, Document } from "@element-plus/icons-vue";

import { useRoute, useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  applicationForm: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["cancel"]);

const cancel = () => {
  emit("cancel");
};

const seeFileView = (file) => {
  console.log("查看文件:", file);
};

const getFileName = (file) => {
  return file.split("/").pop();
};
const handleClose = () => {
  router.go(-1);
};
</script>

<style scoped>
.left-panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* padding: 16px; */
  isolation: isolate; /* 创建新的层叠上下文，防止样式污染 */
}

/* 优化后的样式 */
.view-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  /* align-items: center; 水平居中 */
}

.attachment-section {
  display: flex;
  margin-bottom: 20px;
  align-items: center; /* 垂直居中 */
  /* margin-left: 100px; */
}

.avatar-container {
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.attachment-info {
  flex: 1;
  font-size: 14px;
}

.attachment-label {
  font-weight: bold;
  color: #16191d;
  margin-bottom: 10px;
  font-size: 14px;
}

.section {
  margin-bottom: 30px;
  width: 100%;
  max-width: 800px; /* 确保内容居中 */
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  color: var(--Primary4-950, #16191D);
font-family: "Source Han Sans CN";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.form-item {
  display: flex;
  margin-bottom: 15px;
}

.label {
  color: var(--Primary4-500, #6f7b90);
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.value {color: var(--Primary4-950, #16191D);
text-align: justify;
font-family: "Source Han Sans CN";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.el-col {
  padding: 0 10px;
}

.file-attachment {
  width: 100%;
  /* max-width: 200px; */
  font-size: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  width: 50%;
}

.file-item .el-icon {
  margin-right: 10px;
  color: #409eff;
}

.file-name {
  /* max-width: 180px; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.file-name:hover {
  text-decoration: underline;
}

:deep(.el-form-item--label-top .el-form-item__label) {
  font-size: 13px !important;
  color: #16191d;
}

span {
  font-size: 14px;
  font-weight: 400;
  color: #16191d;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
  display: inline-block;
}

.el-col span {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
</style>
